<template>
  <div class="legend-block">
    <div class="legend-title">图例</div>
    <ul class="legend-list">
      <li class="legend-item" v-for="item in data" :key="item.name">
        <span
          class="legend-color"
          :style="{ background: item.itemStyle.color }"
        ></span>
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
interface PieDataItem {
  value: number;
  name: string;
  itemStyle: { color: string };
}

interface Props {
  data: PieDataItem[];
}

defineProps<Props>();
</script>

<style scoped>
.legend-block {
  flex: 1;
  margin-left: 24px;
  margin-top: 32px;
}

.legend-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 12px;
  font-weight: 600;
}

.legend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.legend-color {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  margin-right: 12px;
}

@media (max-width: 1200px) {
  .legend-block {
    margin-left: 0;
    margin-top: 16px;
  }
}
</style> 